<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="dist/vue.js"></script>

<body>
    <div id="app" style="background: green;color: red;font-size: 20px;">
        hello{{msg}}
        <h2>aaaa</h2>
        {{age}}
    </div>
</body>
<script>
    // 第一次混入
    Vue.mixin({
        data:{
            age:30
        },
        created: function a() {
            console.log("后加的方法a");
        },
        methods: {
            a() { }
        }
    })
    // 第二次混入
    Vue.mixin({
        created: function b() {
            console.log("后加的方法b");

        }
    })

    // 打包方式umd，在window上挂载Vue，打印的是一个函数
    // console.log(Vue);

    // 响应式
    // 这个Vue函数接收了一个复杂的对象参数，这个构造函数到底做了什么？
    let vm = new Vue({
        el: "#app",
        // 简单属性
        data: {
            msg: "你好", //简单属性
            name:"清华",
            school: {    //属性值还是对象
                name: "清华大学",
                addr: "北京市海淀区"
            },
            users:[
                {name:"sa"}
            ],
            arr: ['小博', '大博', '坤坤']
        },
        props: {},
        watch: {},
        computed: {},
        methods: {
            b(){
                
            }
        },
        created() {
            console.log("Vue中的created构造函数");
        }
    })
    // vm.$options.data.user = {
    //     age: 20
    // }
</script>

</html>